<template>
  <li draggable="true" @dragstart="dragStart" @dragover="dragOver" @drop="drop">
    <div class="left">
      <div :class="{ chose: true, selected: done }" @click="setState(id)"></div>
      <input
        type="text"
        v-if="isEdit"
        @keyup.enter="setContent"
        @blur="setContent"
        v-model="newContent"
        v-focus
      />
      <span v-else @click="isEdit = true" :class="done?'done':''">{{ content }}</span>
    </div>
    <button class="right" @click="remove(id)">删除</button>
  </li>
</template>
  
  <script setup>
import { ref, inject } from "vue";
const props = defineProps({
  id: { type: String, required: true },
  content: { type: String, required: true },
  done: { type: Boolean, required: true },
});

//能有编辑
const emits = defineEmits(["toggle", "remove", "setContent"]);

const isEdit = ref(false);
const newContent = ref("");
//表示当前正在拖拽的li
//向父组件传递修改状态的方法
const setState = (id) => {
  emits("toggle", id);
};

//创建一个获取焦点的自定义指令
const vFocus = {
  //当使用该指令的组件挂载完成后
  mounted(el) {
    //当前的el是一个input
    el.focus();
  },
};
//向父组件传递删除元素的方法
const remove = (id) => {
  emits("remove", id);
};
//向父组件传递修改内容的方法
const setContent = () => {
  const value = newContent.value.trim();
  if (value != "" && value != props.content) {
    emits("setContent", props.id, value);
  }
  isEdit.value = false;
  newContent.value = "";
};

</script>
  
  <style scoped>
li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 40px;
  height: 50px;
  width: 100%;
  border-bottom: 1px solid #eeeeee;
}
li:hover {
  background-color: #dddddd;
}
li .left {
  width: 80%;
  display: flex;
}
li input {
  width: 100%;
}
li .left .chose {
  margin-right: 30px;
  position: relative;
  width: 20px;
  height: 20px;
  border: 1px solid black;
  border-radius: 2px;
}
.selected {
  background-color: #767676;
}
.selected::before {
  content: ""; /* Unicode character for tick */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border: 4px solid white;
  border-left: none;
  border-top: none;
  display: block;
}
li .right {
  width: 50px;
  height: 20px;
  background-color: #efefef;
  outline: none;
  border: 1px solid black;
}
.done {
    color: red;
    text-decoration: line-through red;
  }
</style>